<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/engine.js"></script>
		<script type="text/javascript" src="js/lin_formValidate.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
		$('#username').lin_formValidate('required','请填写用户名称').lin_formValidate('minlength',5,'用户名长度5~8个字符').lin_formValidate('maxlength',8,'用户名长度5~8个字符').lin_formValidate();
		$('#sex').lin_formValidate('selectLength',1,'你不记得你的性别了').lin_formValidate();
		$('#aihao').lin_formValidate('selectRequired','请选择爱好').lin_formValidate();
		$('#feiji').lin_formValidate('selectLength',2,'请选择至少选择两种飞机').lin_formValidate();
		$('#pc').lin_formValidate('selectLength',2,'请选择至少选择两种款式').lin_formValidate();
		$('#email').lin_formValidate('required','请填写电子邮箱').lin_formValidate('email','邮箱格式不正确').lin_formValidate();
		$('#address').lin_formValidate('custome',function(value){
			 if(value=='桂林'){return true;}else{return false;}
		},'请填写地址:正确地址是桂林').lin_formValidate({successText:'输入正确'});
		$('#idcard').lin_formValidate('idCard','身份证格式不正确').lin_formValidate();
		$('#qq').lin_formValidate('regExp','qq','你填写的是QQ不').lin_formValidate();
		$('#day').lin_formValidate('regExp','date','时期格式不正确').lin_formValidate();
		$('#tel').lin_formValidate('tel').lin_formValidate();
		$('#url').lin_formValidate('url','地址不正确，请以http://开头').lin_formValidate();
		$('#zipcode').lin_formValidate('zipcode','邮政编码格式不正确').lin_formValidate();
		$('#mobile').lin_formValidate('mobile').lin_formValidate();
		$('#price').lin_formValidate('decimal').lin_formValidate();
		$('#lin_form').submitValidate();
			});
		</script>
	</head>
	<body id="main">
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
			<iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>表单验证插件</h2><span class="file">Define in : lin_formValidate.1.0.js</span></div>
			
			<div class="mod_desc">
        			<p>具体怎么用，可以查看下面的js代码调用,能验证的类型都在实例里面，此表单验证插件是为了方便以后开发仿写而成。</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				$('<span>target</span>').lin_formValidate([ <em>options</em> ]).lin_formValidate();
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js,engine.js</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>target</dt>
							<dd>String</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>target DOM元素ID,对匹配元素进行插件绑定。</p>
						</div>
					</li>
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type optional">可选</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			
    
    
    <div class="example_box">
        <h5>例子一：基本调用</h5>
        
		<p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_field{color:#666; padding:5px 0px;}
.lin_form_title{float:left; display:inline; width:50px; text-align:right;}
.lin_form_text,.lin_form_select{border:1px solid #999; margin-left:10px; float:left; display:inline;}
.lin_form_checkbox{float:left; display:inline; margin-left:10px;}
.lin_tip{margin-left:10px; color:#333;}
.lin_success{color:#090;}
.lin_error{color:#900;}</pre>
        </div>        
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#username').lin_formValidate('required','请填写用户名称').lin_formValidate('minlength',5,'用户名长度5~8个字符').lin_formValidate('maxlength',8,'用户名长度5~8个字符').lin_formValidate();
$('#sex').lin_formValidate('selectLength',1,'你不记得你的性别了').lin_formValidate();
$('#aihao').lin_formValidate('selectRequired','请选择爱好').lin_formValidate();
$('#feiji').lin_formValidate('selectLength',2,'请选择至少选择两种飞机').lin_formValidate();
$('#pc').lin_formValidate('selectLength',2,'请选择至少选择两种款式').lin_formValidate();
$('#email').lin_formValidate('required','请填写电子邮箱').lin_formValidate('email','邮箱格式不正确').lin_formValidate();
$('#address').lin_formValidate('custome',function(value){
			 if(value=='桂林'){return true;}else{return false;}
		},'请填写地址:正确地址是桂林').lin_formValidate({successText:'输入正确'});
$('#idcard').lin_formValidate('idCard','身份证格式不正确').lin_formValidate();
$('#qq').lin_formValidate('regExp','qq','你填写的是QQ不').lin_formValidate();
$('#day').lin_formValidate('regExp','date','时期格式不正确').lin_formValidate();
$('#tel').lin_formValidate('tel').lin_formValidate();
$('#url').lin_formValidate('url','地址不正确，请以http://开头').lin_formValidate();
$('#zipcode').lin_formValidate('zipcode','邮政编码格式不正确').lin_formValidate();
$('#mobile').lin_formValidate('mobile').lin_formValidate();
$('#price').lin_formValidate('decimal').lin_formValidate();
$('#lin_form').submitValidate();</pre>
        </div>        
        
        <div class="demo_box">
            
            
            <form id="lin_form" method="post">
                                	<div class="clearfix lin_field">
                                    	<label class="lin_form_title">用户名</label>
                                        <input type="text"  class="lin_form_text fl" id="username" name="username"/>
                                        <span id="usernameTip" class="lin_tip fl"></span>
                                    </div>
                                	<div class="clearfix lin_field">
                                    	<label class="lin_form_title">性别</label>
                                        <div class="lin_form_checkbox">
                                        <input type="radio" name="sex" id="sex"  value="1"/>男<input type="radio" name="sex"  value="2"/>女</div>
                                        <span id="sexTip" class="lin_tip"></span>
                                    </div>
									<div class="clearfix lin_field">
                                    	<label class="lin_form_title">爱好</label>
        								<select name="aihao" id="aihao" class="lin_form_select" type="select-one">
        									<option value="0">请选择</option>
            								<option value="1">篮球</option>
        								</select>
                						<span id="aihaoTip" class="lin_tip"></span>
        							</div>
        							<div class="clearfix lin_field">
        								<label class="lin_form_title">飞机</label>
            							<select name="feiji" id="feiji" multiple="multiple" class="lin_form_select" type="select-multiple">
        									<option value="0">1号</option>
            								<option value="1">2号</option>
             								<option value="3">3号</option>
              								<option value="3">4号</option>
        								</select>
                						<span id="feijiTip" class="lin_tip"></span>
        							</div>
       								<div class="clearfix lin_field">
        	  							<label class="lin_form_title">电脑</label>
                                        <div class="lin_form_checkbox">
                                    	<input type="checkbox" name="pc"  id="pc" value="1"/>华硕<input type="checkbox" name="pc" value="2" />惠普<input type="checkbox" name="pc"  value="3"/>联想
                                        </div>
              							<span id="pcTip" class="lin_tip"></span> 
        							</div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">邮箱</label>
                                        <input type="text" name="email"  id="email" class="lin_form_text"/>
                                        <span id="emailTip" class="lin_tip"></span>
                                    </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">地址</label>
                                        <input type="text" name="address"  id="address" class="lin_form_text"/>
                                        <span id="addressTip" class="lin_tip"></span>
                                    </div>    
       								<div class="clearfix lin_field">
                                    	<label class="lin_form_title">证件</label>
                                    	<input type="text" name="idcard"  id="idcard" class="lin_form_text"/>
                                        <span id="idcardTip" class="lin_tip"></span>
                                    </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">QQ</label>
                                        <input type="text" name="qq"  id="qq" class="lin_form_text"/>
                                        <span id="qqTip" class="lin_tip"></span>
                                     </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">生日</label>
                                        <input type="text" name="day"  id="day" class="lin_form_text"/>
                                        <span id="dayTip" class="lin_tip"></span>
                                    </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">电话</label>
                                        <input type="text" name="tel"  id="tel" class="lin_form_text"/>
                                        <span id="telTip" class="lin_tip"></span>
                                    </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">url</label>
                                        <input type="text" name="url"  id="url" class="lin_form_text"/>
                                        <span id="urlTip" class="lin_tip"></span>
                                    </div> 
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">邮编</label>
                                        <input type="text" name="zipcode"  id="zipcode" class="lin_form_text"/>
                                        <span id="zipcodeTip" class="lin_tip"></span>
                                    </div>  
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">手机</label>
                                        <input type="text" name="mobile"  id="mobile" class="lin_form_text"/>
                                        <span id="mobileTip" class="lin_tip"></span>
                                    </div>
        							<div class="clearfix lin_field">
                                    	<label class="lin_form_title">价格</label>
                                        <input type="text" name="price"  id="price" class="lin_form_text"/>
                                        <span id="priceTip" class="lin_tip"></span>
                                    </div>           
       								<div class="clearfix lin_field"><input type="submit" value="提交" /></div>                                                                        
                                </form>
			
            
        </div>
        
    </div>
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">lin_formValidate</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
